<template>
    <div class="menu-bar">

        <n-popover ref="popoverRef" trigger="manual" placement="bottom-start" class="custom-popover" :show="showPopover"
            :show-arrow="false">
            <template #trigger>

                <div class="banner-class">

                    <a href="/">
                        <img style="margin-right: 60px;width: 153px;" src="@/assets/images/png/liehao.png">
                    </a>


                    <n-tabs class="custom-tabs" v-model:value="selectedTab" @update:value="handleTabChange"
                        :tab-style="{ color: 'white', fontWeight: 'bold' }" type="line" trigger="hover">
                        <n-tab @click="handleTabClick(item.id)" :name="item.id" v-for="item in home_nav_list"
                            :key="item.id">
                            {{ item.name }}
                        </n-tab>
                    </n-tabs>

                    <div class="input-container">
                        <n-input placeholder="请输入关键词" passively-activated v-model:value="searchValue"
                            :disabled="selectedTab == '999'" @keydown.enter="handleEnter">
                            <template #suffix>
                                <img @click="selectedTab == '999' ? null : goSearchPage()" class="icon-search"
                                    src="@/assets/images/svg/search.svg" alt="搜索" />
                            </template>
                        </n-input>
                    </div>

                </div>

            </template>



            <div class="popover-content">
                <div class="left-menu">
                    <!-- <div class="item" @mouseover="(event) => handleMouseOver(event, '最新产品')"> <span>最新产品</span> </div> -->
                    <div class="item" @click="goToProductListPage(data.id)"
                        @mouseover="(event) => handleMouseOver(event, data)"
                        @mouseout="(event) => handleMouseOut(event, data)" v-for="data in menuLeftList" :key="data.id">
                        <span>{{
                            data.name }}</span>
                        <img class="icon-go" src="@/assets/images/svg/right-arrow.svg" />
                    </div>
                    <!-- <div class="item" @mouseover="(event) => handleMouseOver(event, '所有类别列表')"> <span>所有类别列表</span>
                    </div> -->
                </div>

                <!-- <div class="right-menu" v-show="menuRightList.length > 0">
                    <div class="item" v-for="data in menuRightList" :key="data"><span>{{
                        data }}</span>
                        <img class="icon-go" src="@/assets/images/svg/right-arrow.svg" />
                    </div>

                </div> -->

                <!-- <div class="center-layout"></div> -->

                <!-- <div class="end-layout">
                    <span class="select-label">{{ selectLeft.name }}</span>

                    <div class="product-image">
                        <img v-if="selectLeft != ''" class="select-pic"
                            src="https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/24370.jpg" />
                    </div>


                    <span v-if="selectLeft != ''" class="description">{{ "查看更多" }}</span>
                </div> -->
            </div>

        </n-popover>

    </div>

    <!-- 遮罩层 -->
    <div v-if="showPopover" @mouseenter="handleTabReset" class="menu-bar-overlay"></div>

</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, defineProps } from 'vue';
import { navbarMenu } from '@/api'

const props = defineProps({
    passTab: {
        type: String,
        required: true
    },
})

console.log("passTab=" + props.passTab)



const selectedTab = ref(null); // 不默认选中任何 Tab



const showPopover = ref(false)

const handleTabChange = async (tabName) => {
    console.log('当前选中的标签页:', tabName);
    if (tabName == "1") {
        showPopover.value = true;

        if (menuLeftList.value.length == 0) {
            const params = {
                nav: '1,3',
                parent_id: tabName
            }
            const result = await navbarMenu(params)
            menuLeftList.value = [{ id: "-1", name: "全部 All" }, ...result.data]
        }


    } else {
        showPopover.value = false;
    }
};

const handleTabClick = (tabId) => {
    console.log("handleTabClick", tabId)
    if (tabId == -1) {
        router.push({
            name: 'Home',
        })
    } else if (tabId == 4) {
        router.push({
            name: 'News',
        })
    } else if (tabId == 43) {
        router.push({
            name: 'Arrival',
        })
    } else if (tabId == 45) {
        router.push({
            name: 'Advance',
        })
    } else if (tabId == 36) {
        router.push({
            name: 'Board',
        })
    }else if (tabId == 37) {
        router.push({
            name: 'Company',
        })
    }else if (tabId == 41) {
        router.push({
            name: 'Wholesale',
        })
    }


}

const handleTabReset = () => {
    // selectedTab.value = null;
    showPopover.value = false;
    menuRightList.value = []
}

const selectLeft = ref("")
const handleMouseOver = (event, data) => {
    // console.log("handleMouseOver", data)
    selectLeft.value = data
    if (data == "静态模型") {
        menuRightList.value = menuRightList1;
    } else if (data == "迷你四驱车") {
        menuRightList.value = menuRightList3;
    } else if (data == "最新产品") {
        menuRightList.value = []
    } else if (data == "所有类别列表") {
        menuRightList.value = []
    }
    else {
        menuRightList.value = menuRightList2;
    }
}

const handleMouseOut = (event, data) => {
    //console.log("handleMouseOut", data)
    //menuRightList.value = []
}
//["静态模型", "遥控模型", "迷你四驱车", "伊达雷利", "万代BanDai", "工具Tool", "油漆&喷漆"]
const menuLeftList = ref([])


const menuRightList = ref([])
const menuRightList1 = ["静态模型1", "静态模型2", "静态模型3"]
const menuRightList2 = ["遥控模型1", "遥控模型2", "遥控模型3"]
const menuRightList3 = ["迷你四驱车1", "迷你四驱车2", "迷你四驱车3"]


const home_nav_list = ref([])
const getHomeNavList = async () => {
    const params = {
        nav: '1,3',
    }
    const result = await navbarMenu(params)
    home_nav_list.value = [{
        "id": "-1",
        "parent_id": "0",
        "module": "-1",
        "name": "网站首页",
        "columnimg": ""
    }, ...result.data]

}

onMounted(() => {

    if (props.passTab) {
        selectedTab.value = props.passTab;
    }

    getHomeNavList();
});

const router = useRouter()
const goToProductListPage = (id) => {
    console.log("typeId", id)
    showPopover.value = false;
    router.push({
        name: 'Product',
        query: {
            typeId: id
        }
    })
}


const searchValue = ref("")
const goSearchPage = () => {
    if (searchValue.value != "") {
        router.push({
            name: 'Search',
            query: {
                searchValue: searchValue.value
            }
        })
    }

}
const handleEnter = (e) => {
    console.log('用户按下了回车键，输入内容为：', e)
    goSearchPage()
}


</script>

<style scoped lang="scss">
.menu-bar {
    background-color: black;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;

    .banner-class {
        height: 100%;
        margin: 0 20px;
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;

        ::v-deep .custom-tabs .n-tabs-bar {
            background-color: #00aeff !important;
            height: 3px;

        }

        ::v-deep .custom-tabs {
            width: fit-content;
        }

        ::v-deep .custom-tabs .n-tabs-nav-scroll-content {
            border-bottom: none !important;
        }

        .input-container {
            margin-left: 100px;
            width: 250px;

            .n-input {
                width: 100%;
            }

            .icon-search {
                cursor: pointer;
                margin-right: 5px;
            }
        }

    }
}

.popover-content {
    width: 600px;
    height: 400px;
    z-index: 999;
    display: flex;

    .left-menu {
        box-sizing: border-box;
        height: 100%;
        padding: 30px 30px 30px 40px;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        border-right: 1px solid #CDD1D3;
    }

    // .right-menu {
    //     box-sizing: border-box;
    //     height: 100%;
    //     padding: 30px 30px 30px 40px;
    //     display: flex;
    //     flex-direction: column;
    //     width: 65%;
    //     align-items: center;
    //     border-right: 1px solid #CDD1D3;
    // }

    // .center-layout {
    //     flex: 1;
    // }

    .end-layout {
        width: 65%;
        background-color: #EAEAEA;
        padding: 35px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .select-label {
            font-size: 20px;
            color: #0075C1;
            font-weight: 500;
        }

        .select-pic {
            margin-top: 5px;
            width: 220px;
            height: 165px;
            object-fit: contain;
        }

        .description {
            font-size: 13px;
            color: #000;
            margin-top: 10px;
        }

    }

    .item {
        width: 100%;
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: #000000;

        span {
            font-size: 15px;
        }


        .icon-go {
            width: 14px;
            height: 14px;
        }
    }

    .item:hover {
        color: #00aeff;
    }
}

/* 遮罩层样式 */
.menu-bar-overlay {
    position: fixed;
    /* 固定定位，覆盖整个屏幕 */
    top: 70px;
    bottom: 0;
    /* 从底部开始 */
    left: 0;
    right: 0;
    height: 100%;
    /* 遮罩高度为屏幕的一半（可根据需要调整） */
    background-color: rgba(0, 0, 0, 0.5);
    /* 黑色背景，透明度为 0.5 */
    z-index: 998;
    /* 确保遮罩在其他内容之上 */
}
</style>